<template>
    <div>
        <!-- 头部 -->
        <div class="nav">
            <img src="../Img/logo.png" style="width:25vw;height:6.5vh;margin-left:6vw;margin-top:1vh;" alt="">
            <img src="../Img/sousuo.png" style="width:4.5vw;height:4vh;margin-left:55vw;margin-top:2.5vh;" alt="">
        </div>
        <!-- 轮播图 -->
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in images" :key="image">
                <img :src="image" style="width: 100%;" />
            </van-swipe-item>
        </van-swipe>
        <!-- 图标 -->
<!-- 
        width: 14vw;
    height: 8vh;
    background-color: red;
    border-radius: 50%; -->
        <div class="tubiaodianji">
            <div style="width:14vw;height:8vh;border-radius:50%;display:inline-block;margin-left:5vw;background-color:#FA8C16;">
                <img src="../Img/chong.png" alt="" style="margin-top: 1.7vh;margin-left:2.9vw;" />
                <p>充值中心</p>
            </div>
            <div style="width:14vw;height:8vh;border-radius:50%;display:inline-block;margin-left:5vw;background-color:#FADB14;">
                <img src="../Img/￥.png" alt="" style="margin-top: 1.9vh;margin-left:3.3vw;" />
                <p>充值中心</p>
            </div>
            <!-- <div style="width:14vw;height:8vh;border-radius:50%;display:inline-block;margin-left:5vw;background-color:#40A9FF;">
                <img src="../Img/game.png" alt="" style="margin-top: 2vh;margin-left:3.2vw;" />
                <p>充值中心</p>
            </div>
            <div style="width:14vw;height:8vh;border-radius:50%;display:inline-block;margin-left:5vw;background-color:#FF7875;">
                <img src="../Img/chong.png" alt="" style="margin-top: 1.5vh;margin-left:2.7vw;" />
                <p>充值中心</p>
            </div>
            <div style="width:14vw;height:8vh;border-radius:50%;display:inline-block;margin-left:5vw;background-color:#36CFC9;">
                <img src="../Img/chong.png" alt="" style="margin-top: 1.5vh;margin-left:2.7vw;" />
                <p>充值中心</p>
            </div> -->
        </div>
    </div>
</template>
<script setup>

// 轮播图片
const images = [
    "https://game.mhcdkey.com/image/ask/200307/5udbfo5ipvo.jpg",
   "https://cbg2.fp.ps.netease.com/file/661fc793b323aadf59d0bd66qIrLkyEG05",
   "https://cbg2.fp.ps.netease.com/file/65e6faa626fbe14208b39122XTP3D89p05",
   "https://cbg2.fp.ps.netease.com/file/66038a657adcca666df0e28bgIsMhWub05",
   "https://cbg2.fp.ps.netease.com/file/622821cbb7b9d574596a72dbPQICrtb804"
]


</script>
<style>
p{
    font-size: 3.5vw;
}


/* 头部 */
.nav {
    width: 100%;
    height: 8vh;
    background-color: #CF1322;
    display: flex;
}


/* 图标区域 */
.tubiaodianji{
    width: 100vw;
    height: 12vh;
    display: flex;
}

</style>